<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09_http-文件上传前端代码</title>
</head>

<body>
  <input type="file" id="file" />
  <button>上传</button>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
    const button = document.querySelector("button");
    button.addEventListener("click", (event) => {
      event.preventDefault();
      const formData = new FormData();

      const input = document.querySelector("input");
      formData.set('photo', input.files[0]);

      axios({
        method: "post",
        url: "http://localhost:8000",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
    })
  </script>
</body>

</html>